workbox-strategies

What is workbox-strategies?

The workbox-strategies package is part of the Workbox suite of libraries, which are designed to make it easier to build offline-first, service worker-powered web applications. This package provides various strategies for caching and retrieving resources, allowing developers to control how network requests are handled by the service worker.

What are workbox-strategies's main functionalities?

Cache First Strategy

The Cache First strategy checks the cache for a response before trying to get one from the network. It's useful for assets that don't change often.

import { CacheFirst } from 'workbox-strategies';

const cacheFirst = new CacheFirst();
workbox.routing.registerRoute(
  ({request}) => request.destination === 'image',
  cacheFirst
);

Network First Strategy

The Network First strategy tries to get a response from the network first, falling back to the cache if the network is unavailable. This is good for content that updates frequently.

import { NetworkFirst } from 'workbox-strategies';

const networkFirst = new NetworkFirst();
workbox.routing.registerRoute(
  ({request}) => request.destination === 'document',
  networkFirst
);

Stale While Revalidate Strategy

The Stale While Revalidate strategy serves a response from the cache, while simultaneously fetching an updated version from the network for next time. It's a good compromise for resources where freshness is not critical.

import { StaleWhileRevalidate } from 'workbox-strategies';

const staleWhileRevalidate = new StaleWhileRevalidate();
workbox.routing.registerRoute(
  ({request}) => request.destination === 'script',
  staleWhileRevalidate
);

Network Only Strategy

The Network Only strategy forces the response to be retrieved from the network, without any caching involved. This is useful for requests that need to be fresh and aren't suitable for caching.

import { NetworkOnly } from 'workbox-strategies';

const networkOnly = new NetworkOnly();
workbox.routing.registerRoute(
  ({request}) => request.destination === 'script',
  networkOnly
);

Cache Only Strategy

The Cache Only strategy forces the response to be retrieved from the cache, without going to the network. This is useful for assets that have been precached and are known to be available offline.

import { CacheOnly } from 'workbox-strategies';

const cacheOnly = new CacheOnly();
workbox.routing.registerRoute(
  ({request}) => request.destination === 'style',
  cacheOnly
);

Other packages similar to workbox-strategies

sw-toolbox

sw-toolbox is a legacy library for service worker caching strategies. It offers similar functionalities to workbox-strategies but has been deprecated in favor of Workbox. Workbox-strategies is more modular and comes with additional features and improvements.

sw-precache

sw-precache is another legacy Google library that generates a service worker script that precaches resources. It's similar to workbox-strategies in that it aims to make offline support easier, but Workbox has since superseded it, offering a more comprehensive and flexible approach to caching strategies.

README

This module's documentation can be found at https://developers.google.com/web/tools/workbox/modules/workbox-strategies